<template>
  <div style="width: 100%;padding-top: 20px">
    <div style="border: 1px solid;width: 90%;display: flex; margin:0px 40px auto;">
      <div style="flex: 1;border: 1px solid;align-items: center;justify-content: center;display: flex">
        <span>管理1</span>
      </div>
      <div style="flex: 1;border: 1px solid;">
        <div class="botm">A区</div>
        <div class="botm">B区</div>
        <div class="botm">C区</div>
        <div class="botm">D区</div>
        <div class="botm">E区</div>
        <div class="botm">F区</div>
      </div>
      <div style="flex:3;border: 1px solid;">
        <div style="padding: 5px 10px;display: inline-block;border: 1px solid #eee;border-radius: 5px ;margin: 10px">
          <input type="checkbox"/>
          <span>设备1</span>
        </div>
        <div style="padding: 5px 10px;display: inline-block;border: 1px solid #eee;border-radius: 5px ;margin: 10px">
          <input type="checkbox"/>
          <span>设备2</span>
        </div>
        <div style="padding: 5px 10px;display: inline-block;border: 1px solid #eee;border-radius: 5px ;margin: 10px">
          <input type="checkbox"/>
          <span>设备3</span>
        </div>
      </div>
    </div>
    <div style="border: 1px solid;width: 90%;display: flex; margin:0px 40px auto;">
      <div style="flex: 1;border: 1px solid;align-items: center;justify-content: center;display: flex">
        <span>管理2</span>
      </div>
      <div style="flex: 1;border: 1px solid;">
        <div class="botm">A区</div>
        <div class="botm">B区</div>
        <div class="botm">C区</div>
        <div class="botm">D区</div>
        <div class="botm">E区</div>
        <div class="botm">F区</div>
      </div>
      <div style="flex:3;border: 1px solid;">
        <div style="padding: 5px 10px;display: inline-block;border: 1px solid #eee;border-radius: 5px ;margin: 10px">
          <input type="checkbox"/>
          <span>设备1</span>
        </div>
        <div style="padding: 5px 10px;display: inline-block;border: 1px solid #eee;border-radius: 5px ;margin: 10px">
          <input type="checkbox"/>
          <span>设备2</span>
        </div>
        <div style="padding: 5px 10px;display: inline-block;border: 1px solid #eee;border-radius: 5px ;margin: 10px">
          <input type="checkbox"/>
          <span>设备3</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "deviceManager"
}
</script>

<style scoped>
.botm{
  padding: 8%;
  border: #42b983 solid 1px;
}
</style>
